<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>同咨科技-系统设置</title>
	<meta name="renderer" content="webkit|ie-comp|ie-stand">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<meta http-equiv="Cache-Control" content="no-siteapp" />
	<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
	<link rel="stylesheet" href="../../static/css/weadmin.css">
	<link href="../../lib/layui/css/layui.css" rel="stylesheet">

	<script type="text/javascript" src="../../lib/layui/layui.js" charset="utf-8"></script>
	<script type="module" src="../components/use-body.js"></script>

	<link href="../../static/css/system.css" rel="stylesheet">
	<link href="../../static/css/uselay.css" rel="stylesheet">
</head>

<body>
	<use-body>
		<div class="page-body">

			<!-- 左边菜单 -->
			<div class="side">
				<span class="layui-breadcrumb breadcrumb" lay-separator="/">
					<a><i title="首页" class="iconfont use-more"></i></a>
					<a><cite>系统设置</cite></a>
				</span>

				<div class="layui-panel">
					<ul class="layui-menu" id="demo-menu">
						<li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: false}">
							<div class="layui-menu-body-title">部门</div>
							<ul>
								<li class="">
									<div class="layui-menu-body-title">部门管理</div>
								</li>
								<li class="layui-menu-item-group layui-menu-item-down" lay-options="{type: 'group'}">
									<div class="layui-menu-body-title">
										员工管理 <i class="layui-icon layui-icon-up"></i>
									</div>
									<ul>
										<li>
											<div class="layui-menu-body-title">
												XXXXXX有限公司
											</div>
										</li>
										<li class="layui-menu-item-group layui-menu-item-down" lay-options="{type: 'group', isAllowSpread: true}">
											<div class="layui-menu-body-title">
												总裁办 <i class="layui-icon layui-icon-up"></i>
											</div>
											<ul>
												<li class="layui-menu-item-group layui-menu-item-down" lay-options="{type: 'group', isAllowSpread: true}">
													<div class="layui-menu-body-title">
														华南区域 <i class="layui-icon layui-icon-up"></i>
													</div>
													<ul>
														<li class="layui-menu-item-checked">华南一部</li>
													</ul>
												</li>
											</ul>
										</li>
										<li>
											<div class="layui-menu-body-title">行政部</div>
										</li>
									</ul>
								</li>
								<li>
									<div class="layui-menu-body-title">角色管理</div>
								</li>
							</ul>
						</li>
						<li class="layui-menu-item-divider"></li>
						<li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: false}">
							<div class="layui-menu-body-title">企业</div>
							<ul>
								<li>
									<div class="layui-menu-body-title">企业信息</div>
								</li>
							</ul>
						</li>
					</ul>
				</div>
			</div>

			<!-- 主体 -->
			<div class="system page-border">
				<div class="system-title">员工管理</div>
				<!-- 搜索 -->
				<div class="search-box">
					<div class="layui-input-wrap">
						<div class="layui-input-prefix">
							<i class="iconfont  use-search"></i>
						</div>
						<input type="text" placeholder="Search..." class="layui-input">
					</div>
					<div class="btn-box">
						<button type="button" class="layui-btn layui-btn-primary layui-btn-radius">
							<i class="iconfont  use-search"></i>
							搜索
						</button>
						<button type="button" class="layui-btn layui-btn-normal layui-btn-radius" lay-on="add-staff">添加员工</button>
					</div>
				</div>

				<div class="table-data">
					<table class="layui-hide" id="ID-table-demo-data"></table>
				</div>
			</div>
		</div>

	</use-body>

	<!--查看成员-->
	<div id="layui-view-staff" style="display: none;">
		<div class="dialog layui-item" style="width: 600px;">
			<div class="layui-row">
				<div class="layui-col-xs6">
					<div class="title">账号</div>
					<div class="text">100001</div>
				</div>
				<div class="layui-col-xs6">
					<div class="title">部门</div>
					<div class="text">施工部</div>
				</div>
				<div class="layui-col-xs6">
					<div class="title">姓名</div><!--bg-red红色, bg-blue蓝色-->
					<div class="text">张三<span class="bg-blue">正常</span></div>
				</div>
				<div class="layui-col-xs6">
					<div class="title">角色</div>
					<div class="text">普通员工</div>
				</div>
				<div class="layui-col-xs6">
					<div class="title">性别</div>
					<div class="text">男</div>
				</div>
			</div>
			<hr>
			<div class="layui-row">
				<div class="layui-col-xs6">
					<div class="title">手机号码</div>
					<div class="text">18353360236</div>
				</div>
				<div class="layui-col-xs6">
					<div class="title">邮箱</div>
					<div class="text">-</div>
				</div>
			</div>
		</div>
	</div>

	<!--添加员工-->
	<div id="layui-add-staff" style="display: none;">
		<div class="dialog" style="width: 900px;">
			<form class="layui-form " action="">
				<div class="staff-info">企业简称：AAJK68JJ6</div>
				<div class="layui-row">
					<div class="layui-col-xs6">
						<div class="layui-form-item">
							<label class="layui-form-label required">账号</label>
							<div class="layui-input-block layui-input-flex">
								<span>AAJK68JJ6</span>
								<input type="text" name="username" lay-verify="required" placeholder="只能是英文/数字和下划线组成" autocomplete="off" class="layui-input">
							</div>
						</div>
					</div>
					<div class="layui-col-xs6">
						<div class="layui-form-item">
							<label class="layui-form-label">部门</label>
							<div class="layui-input-block">
								<select>
									<option value="">请选择</option>
									<option value="AAA">选项 A</option>
								</select>
							</div>
						</div>
					</div>
					<div class="layui-col-xs6">
						<div class="layui-form-item">
							<label class="layui-form-label required">密码</label>
							<div class="layui-input-block">
								<input type="text" name="username" lay-verify="required" placeholder="密码由数字和字母组合,且长度不少于6" autocomplete="off" class="layui-input">
							</div>
						</div>
					</div>
					<div class="layui-col-xs6">
						<div class="layui-form-item">
							<label class="layui-form-label">员工角色</label>
							<div class="layui-input-block">
								<select>
									<option value="">请选择</option>
									<option value="AAA">选项 A</option>
								</select>
							</div>
						</div>
					</div>
					<div class="layui-col-xs6">
						<div class="layui-form-item">
							<label class="layui-form-label required">姓名</label>
							<div class="layui-input-block">
								<input type="text" name="username" lay-verify="required" placeholder="输入姓名" autocomplete="off" class="layui-input">
							</div>
						</div>
					</div>
					<div class="layui-col-xs6">
						<div class="layui-form-item">
							<label class="layui-form-label">性别</label>
							<div class="layui-input-block">
								<input type="radio" name="sex" value="男" title="男">
								<input type="radio" name="sex" value="女" title="女">
							</div>
						</div>
					</div>
				</div>
				<div class="dialog-footer">
					<div class="cent">
						<button type="reset" class="layui-btn btn-text">取消</button>
						<button type="submit" class="layui-btn layui-btn-radius" lay-submit lay-filter="demo">保存</button>
					</div>
				</div>
			</form>
		</div>
	</div>

	<!--编辑成员-->
	<div id="layui-edit-staff" style="display: none;">
		<div class="dialog" style="width: 900px;">
			<form class="layui-form " action="">
				<!-- <div class="staff-info">企业简称：AAJK68JJ6</div> -->
				<div class="layui-row">
					<div class="layui-col-xs6">
						<div class="layui-form-item">
							<label class="layui-form-label required">账号</label>
							<div class="layui-input-block layui-input-flex">
								<!-- <span>AAJK68JJ6</span> -->
								<input type="text" name="username" lay-verify="required" placeholder="只能是英文/数字和下划线组成" autocomplete="off" class="layui-input">
							</div>
						</div>
					</div>
					<div class="layui-col-xs6">
						<div class="layui-form-item">
							<label class="layui-form-label">部门</label>
							<div class="layui-input-block">
								<select>
									<option value="">请选择</option>
									<option value="AAA">选项 A</option>
								</select>
							</div>
						</div>
					</div>
					<div class="layui-col-xs6">
						<div class="layui-form-item">
							<label class="layui-form-label required">密码</label>
							<div class="layui-input-block">
								<input type="text" name="username" lay-verify="required" placeholder="密码由数字和字母组合,且长度不少于6" autocomplete="off" class="layui-input">
							</div>
						</div>
					</div>
					<div class="layui-col-xs6">
						<div class="layui-form-item">
							<label class="layui-form-label">员工角色</label>
							<div class="layui-input-block">
								<select>
									<option value="">请选择</option>
									<option value="AAA">选项 A</option>
								</select>
							</div>
						</div>
					</div>
					<div class="layui-col-xs6">
						<div class="layui-form-item">
							<label class="layui-form-label required">姓名</label>
							<div class="layui-input-block">
								<input type="text" name="username" lay-verify="required" placeholder="输入姓名" autocomplete="off" class="layui-input">
							</div>
						</div>
					</div>
					<div class="layui-col-xs6">
						<div class="layui-form-item">
							<label class="layui-form-label">性别</label>
							<div class="layui-input-block">
								<input type="radio" name="sex" value="男" title="男">
								<input type="radio" name="sex" value="女" title="女">
							</div>
						</div>
					</div>
				</div>
				<div class="dialog-footer">
					<div class="cent">
						<button type="reset" class="layui-btn btn-text">取消</button>
						<button type="submit" class="layui-btn layui-btn-radius" lay-submit lay-filter="demo">保存</button>
					</div>
				</div>
			</form>
		</div>
	</div>

	<!--离职交接-->
	<div id="layui-handover" style="display: none;">
		<div class="dialog" style="width: 600px;">
			<form class="layui-form " action="">
				<div class="layui-form-item">
					<label class="layui-form-label required">姓名</label>
					<div class="layui-input-block">
						<input type="text" name="username" lay-verify="required" placeholder="输入交接的员工姓名" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">性别</label>
					<div class="layui-input-block">
						<input type="radio" name="sex" value="男" title="男">
						<input type="radio" name="sex" value="女" title="女">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label required">新密码</label>
					<div class="layui-input-block">
						<input type="text" name="username" lay-verify="required" placeholder="密码由数字和字母组合,且长度不少于6" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-input-block tips">
					交接成功后，会清空已绑定手机和邮箱，请谨慎操作
				</div>
				<div class="dialog-footer">
					<div class="cent">
						<button type="reset" class="layui-btn btn-text">取消</button>
						<button type="submit" class="layui-btn layui-btn-radius" lay-submit lay-filter="demo">保存</button>
					</div>
				</div>
			</form>
		</div>
	</div>

	<!-- 删除弹窗 -->
	<div id="del-layer" style="display: none;">
		<div class="dialog" style="width: 600px;">
			<div class="confirm-dialog">
				<img class="icon" src="../../static/images/warn.png" alt="">
				<div>
					<div class="title"><strong>是否要删除所选成员？</strong></div>
					<p class="describe">删除后，该无法恢复数据</p>
				</div>
			</div>
	
			<div class="dialog-footer">
				<!-- 主体 -->
				<div class="cent">
					<button type="button" class="layui-btn btn-text">取消</button>
					<button type="button" class="layui-btn layui-btn-danger layui-btn-radius">确认</button>
				</div>
			</div>
		</div>
	</div>

</body>

<script type="text/html" id="ID-table-demo-templet-switch">
	<!-- 这里的 checked 的状态值判断仅作为演示 -->
	<input type="checkbox" name="status" lay-skin="switch" lay-filter="demo-templet-status">
</script>

<!-- 工具栏模板 -->
<script type="text/html" id="operate">
	<div class="operate">
		<i class="iconfont use-loop layui-btn btn-text" lay-on="handover"></i>
		<i class="iconfont use-notepad layui-btn btn-text" lay-on="view-staff"></i>
		<i class="iconfont use-edit layui-btn btn-text" lay-on="edit-staff"></i>
		<i class="iconfont use-delete layui-btn btn-text" lay-on="delete"></i>
	</div>
</script>

<script>
	layui.use('table', function () {
		var $ = layui.$;
		var table = layui.table;
		var form = layui.form;
		var util = layui.util;

		// 已知数据渲染
		var inst = table.render({
			elem: '#ID-table-demo-data',
			cols: [[ //标题栏
				{ field: 'name', title: '员工姓名',  unresize: true },
				{ field: 'account', title: '登陆账号',  unresize: true },
				{ field: 'affiliation', title: '所属部门', unresize: true },
				{ field: 'role', title: '角色', unresize: true },
				{ title: '状态', templet: '#ID-table-demo-templet-switch', unresize: true },
				{ title: '操作', width: 170, templet: '#operate', unresize: true }
			]],
			data: [{ // 赋值已知数据
				"name": "路人甲",
				"account": "admin",
				"affiliation": "销售部",
				"role": "销售专员",
			}],
			//skin: 'line', // 表格风格
			//even: true,
			page: true, // 是否显示分页
			limits: [5, 10, 15],
			limit: 10 // 每页默认显示的数量
		});

		// 状态 - 开关操作
		form.on('switch(demo-templet-status)', function (obj) {
			console.log(obj)
			// 开启
		});

		util.on('lay-on', {
			// 查看成员
			'view-staff' : function () {
				layer.open({
					type: 1,
					content: $('#layui-view-staff'), // 捕获的元素
					title: '查看成员',
					success: function (layero) {
						//把内容放到遮罩层里
						var mask = $(".layui-layer-shade");
						mask.appendTo(layero.parent());
					}
				})
			},

			// 添加员工
			'add-staff' : function () {
				layer.open({
					type: 1,
					title: '添加员工',
					content: $('#layui-add-staff'), // 捕获的元素
					success: function (layero) {
						//把内容放到遮罩层里
						var mask = $(".layui-layer-shade");
						mask.appendTo(layero.parent());
					} 
				})
			},

			// 编辑成员  ----> 跟添加一致少两个字段
			'edit-staff': function () {
				layer.open({
					type: 1,
					title: '编辑成员',
					content: $('#layui-edit-staff'), // 捕获的元素
					success: function (layero) {
						//把内容放到遮罩层里
						var mask = $(".layui-layer-shade");
						mask.appendTo(layero.parent());
					}
				})
			},

			// 离职交接
			'handover': function () {
				layer.open({
					type: 1,
					title: '离职交接',
					content: $('#layui-handover'), // 捕获的元素
					success: function (layero) {
						//把内容放到遮罩层里
						var mask = $(".layui-layer-shade");
						mask.appendTo(layero.parent());
					}
				})
			},

			'delete': function () {
				layer.open({
					type: 1,
					closeBtn: 0,
					title: false,
					content: $('#del-layer'), // 捕获的元素
					success: function (layero, index, that) {
						//把内容放到遮罩层里
						var mask = $(".layui-layer-shade");
						mask.appendTo(layero.parent());
					},
				})
			}

		})

	})
</script>

</html>